<script setup>
const props = defineProps({
    percent: {
        type: Number,
        default: 0
    },
    // 最终结果最大值
    maxNum: {
        type: Number,
        default: 10
    },
    // 最终结果保留小数
    decimal: {
        type: Number,
        default: 0
    },
    // 步距
    step: {
        type: Number,
        default: 1
    },
    showPerText: {
        type: Boolean,
        default: true
    },
    // 进度条的宽度
    width: {
        type: Number,
        default: 300
    },
    bgColor: {
        type: String,
        default: '#ebeef5'
    },
    progressColor: {
        type: String,
        default: '#409EFF'
    },
    // 滑块的宽度
    sliderWidth: {
        type: Number,
        default: 20
    },
    // 颜色的类型
    type: {
        type: String,
        default: '#409EFF'
    }
})
const sliderRef = ref(null)
const progressRef = ref(null)
const sliderLeft = ref(0) // 滑块当前的位置
const tempPercent = ref(0) // 进度条当前的的宽度
// 注册传值事件
const emit = defineEmits(['percentChange'])

const setProgressBgStyle = computed(() => {
    return {
        // 加上滑块的宽度
        width: `${props.width}px`
        //  + props.sliderWidth
    }
})
const setSliderStyle = computed(() => {
    return {
        border: `1px solid ${props.type}`,
        width: `${props.sliderWidth}px`,
        height: `${props.sliderWidth}px`,
        left: `${sliderLeft.value - 10}px`
    }
})

onMounted(() => {
    sliderLeft.value = (props.width / 2) // 滑块的x坐标加上滑块的宽度
    // (props.sliderWidth / 2) +
    tempPercent.value = props.percent
    addListener()
})
const addListener = () => {
    let isClickSlider = false
    let distance = 0 // 滑块与点击坐标的绝对距离
    progressRef.value.onclick = e => {
        // 阻止事件冒泡
        if (e.target == sliderRef.value) {
            return
        }
        let curX = e.offsetX - (props.sliderWidth / 2)
        sliderLeft.value = curX
        _countCurPercent()
    }
    sliderRef.value.onmousedown = e => {
        isClickSlider = true
        let curX = sliderRef.value.offsetLeft
        distance = e.pageX - curX // 得出绝对距离
    }
    progressRef.value.onmousemove = e => {
        if (isClickSlider) {
            // 判断是否已经超出进度条的长度
            if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (props.width - 0)) {
                sliderLeft.value = e.pageX - distance
                _countCurPercent()
            }
        }
    }
    progressRef.value.onmouseup = () => {
        isClickSlider = false
    }
}
const _countCurPercent = () => {
    const zeroLine = props.width / 2
    const nowLeft = sliderLeft.value - zeroLine
    const nowValue = nowLeft / zeroLine
    if (props.decimal > 0) {
        const stringNowValue = String(nowValue)
        const index = stringNowValue.indexOf('.') > 0 ? stringNowValue.indexOf('.') : 0
        tempPercent.value = Number(stringNowValue.slice(0, index + 1 + props.decimal))
    } else {
        tempPercent.value = (Math.floor(parseInt(nowLeft / zeroLine * 100) / props.maxNum))
    }
    // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
    if (tempPercent.value <= -(props.maxNum)) {
        sliderLeft.value = 0
    }
    if (tempPercent.value >= props.maxNum) {
        sliderLeft.value = props.width
    }
    emit('percentChange', tempPercent.value)
}
const handleChangePercent = value => {
    sliderLeft.value = (value / props.maxNum) * (props.width / 2) + props.width / 2
    emit('percentChange', value)
}
</script>

<template>
    <div class="c-progress">
        <div ref="progressRef" class="c-progress-outer" :style="setProgressBgStyle">
            <div ref="sliderRef" class="c-progress-slider" :style="setSliderStyle" />
        </div>
        <el-input-number
            v-model="tempPercent"
            class="sliderInput"
            :min="-(props.maxNum)"
            :max="props.maxNum"
            :step="props.step"
            controls-position="right"
            @change="handleChangePercent"
        />
        <!-- <span v-if="showPerText">{{ tempPercent }}</span> -->
    </div>
</template>

<style scoped lang="scss">
.c-progress {
    $width: 190px;
    $radius: 5px;

    display: flex;
    align-items: center;
    .c-progress-outer {
        width: $width;
        height: 5px;
        // border-radius: $radius;
        background: #ebeef5;
        position: relative;
        display: flex;
        align-items: center;
        .c-progress-slider {
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #409eff;
            position: absolute;
            top: -7px;
            z-index: 10;
            cursor: pointer;
        }
    }
    .sliderInput {
        width: 80px;
        margin-left: 20px;
    }
}
</style>

